<!--
 * @Author: peng.chen2
 * @Date: 2022-07-11 12:27:08
 * @LastEditors: peng.chen2
 * @LastEditTime: 2023-01-30 17:45:22
 * @Description: 
 * 
 * Copyright (c) 2023 by feiniu/${git_name}, All Rights Reserved. 
-->
<template>
  <div class="fater-home">
    <div class="module-item" v-for="(item, index) in moduleList" :key="index" @click="goPage(item)">
      <div class="top">
        <img class="logo" :src="item.imgUrl" alt="">
        <div>{{item.title}}</div>
      </div>
      <div class="sub-title">{{item.des}}</div>
    </div>
  </div>
</template>
<script setup>
// import NProgress from 'nprogress'
import {useRouter} from 'vue-router'
// import {ref, watch, nextTick } from 'vue'
  const moduleList = [{
    title: 'Demo',
    imgUrl: require('../assets/imgs/web.png'),
    des: '个人编写demo合集，涉及常用功能或者前沿技术、有趣的实现',
    link: '/subMain/pearlIsland'
  }, {
    title: '文档',
    imgUrl: require('../assets/imgs/web.png'),
    des: '日常总结以及各种技术整合的经验文档',
    link: 'http://localhost:8080/',
    other: true
  }, {
    title: 'threeJs',
    imgUrl: require('../assets/imgs/web.png'),
    des: '修煉threejs实现的酷炫的效果',
    link: '/subMain/sub-threeJs'
  }, {
    title: '介绍',
    imgUrl: require('../assets/imgs/web.png'),
    des: '此网站的介绍以及随谈',
    link: ''
  }]
  // const isLoading = ref(true)
  // NProgress.start()
  // watch(isLoading, (newVal) => {
  //   console.log(newVal)
  //   if(newVal) {
  //     NProgress.start()
  //   } else {
  //     nextTick(() => {
  //       NProgress.done()
  //     }) 
  //   }
  // })
  const router = useRouter()
  const goPage = (item) => {
    if(item.other){
      location.href = item.link
    } else {
      router.push(item.link)
    }
  }
</script>
<style lang="less" scoped>
.fater-home{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 20px;
  .module-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
    list-style: none;
    margin: 10px;
    padding: 15px;
    width: 20%;
    min-height: 180px;
    background: #fff;
    border: 1px solid #cacaca;
    border-radius: 5px;
    transition: all .3s ease-in-out;
    bottom: 0;
    cursor: pointer;
    &:hover {
      bottom: 6px;
      box-shadow: 0 6px 18px 0 #eaeaea;
      .logo{
        transform: scale(1.1)
      }
    }
    .top{
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .sub-title {
      font-size: 14px;
      color: #8e8e8e;
      padding: 0 25px;
      line-height: 20px;
      max-height: 140px;
      margin-top: 20px;
      text-align: left;
    }
    .logo{
      width: 80px;
      height: 80px;
    }
  }
}
</style>
